<template>
  <el-card class="lasted-login-user">
    <div class="imprint">
      <p class="title">平台公告</p>
      <div class="imprint-content">
        <el-scrollbar style="height: 100%;">
          <template v-if="announceList && announceList.length">
            <p v-for="(item) in announceList" :key="item.id" class="imprint-item" @click="toHelpInfo(item)">
              <img :src="imprintImg" alt="imprintImg">
              <span> {{ item.title }} </span>
            </p>
          </template>
          <empty-placeholder v-else :empty-img="emptyImg" style="margin-top:20px;" text="暂无平台公告" image-size="90px"/>
        </el-scrollbar>
      </div>
    </div>
    <div class="lasted-login-user-content">
      <span>最近登录：</span>
      <div class="avatar-list">
        <el-tooltip v-for="(item, i) in lastedLoginUser" :key="i" :content="item.userName+`${item.jobNumber?`(${item.jobNumber})`:''}`" placement="top">
          <div :title="item.userName" class="avatar">
            <img :src="item.avatar || userAvatar" alt="avatar">
          </div>
        </el-tooltip>
      </div>
    </div>
  </el-card>
</template>
<script>
import userAvatar from '@/assets/user-avatar.png';
import imprintImg from '@/assets/home/imprint.png';
import { helpList } from '@/api/help.js';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import emptyImg from '@/assets/empty-data-icon.png';
export default {
  components: { EmptyPlaceholder },
  props: {
    lastedLoginUser: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      userAvatar, emptyImg,
      imprintImg,
      announceList: []
    };
  },
  created() {
    this.getAnnounceList();
  },
  methods: {
    toHelpInfo(article) {
      let routerUrl = null;
      routerUrl = this.$router.resolve({
        name: 'helpDetail',
        params: {
          id: article.id,
          model: article.model || 'announce'
        }
      });
      if (routerUrl) window.open(routerUrl.href, '_blank');
    },
    getAnnounceList() {
      helpList({ model: 'announce', sort: 'createTime' }).then(res => {
        this.announceList = res.data.items;
      });
    }
  }
};
</script>
<style lang="scss">
.lasted-login-user {
  min-width: 314px;
  border-radius: 4px;
  box-shadow: 2px 2px 8px 0px #DDE1EA;
  .el-card__body {
    padding: 16px 20px 18px;
  }
  .imprint {
    border-bottom: 1px solid #F4F4F4;
    p {
      margin: 0;
    }
    .title {
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
    }
    .imprint-content {
      padding-top: 16px;
      font-size: 14px;
      font-family: PingFangSC-Light, PingFang SC;
      font-weight: 300;
      color: #666666;
      height: 212px;
      .imprint-item {
        cursor: pointer;
        display: flex;
        // align-items: center;
        padding-right: 12px;
        margin-bottom: 16px;
        line-height: 1.4;
        align-items: unset;
        img {
          width: 16px;
          height: 16px;
          margin-right: 8px;
          position: relative;
          top: 2px;
        }
        span{
          word-break: break-all;
          overflow:hidden;
          text-overflow:ellipsis;
          display:-webkit-box;
          -webkit-box-orient:vertical;
          -webkit-line-clamp:2;
        }
      }
    }
  }
  .lasted-login-user-content {
    margin-top: 17px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
    span {
      white-space: nowrap;
      font-size: 14px;
      font-family: PingFangSC-Light, PingFang SC;
      font-weight: 300;
    }
    .avatar-list {
      display: flex;
      flex-wrap: wrap;
      height: 33px;
      overflow: hidden;
    }
    // &::v-deep {
    //   .el-scrollbar__view {
    //     display: flex;
    //   }
    // }
  }
 .avatar {
    margin-bottom: 5px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 32px;
      height: 32px;
      border-radius: 50%;
    }
    &:last-child {
      margin-right: 0;
    }
 }
}
</style>
